<template>
  <div id="addCompanyCustom">
    <el-steps :active="active" finish-status="success" simple style="margin-top: 20px">
      <el-step title="基础信息" >1</el-step>
      <el-step title="注册经营信息" >2</el-step>
      <el-step title="关系人信息" >3</el-step>
    </el-steps>

   <!-- 基础信息 -->
   <div class="addItem" v-show="active == 0">
    <h3>基础信息</h3>
    <el-form :label-position="labelPosition" label-width="80px" :model="company">
      <el-form-item label="企业名称">
        <el-input v-model="company.companyName"></el-input>
      </el-form-item>
      <el-form-item label="联系方式">
        <el-input v-model="company.telephone"></el-input>
      </el-form-item>
      <el-form-item label="注册类型">
        <el-input v-model="company.registerType"></el-input>
      </el-form-item>
      <el-form-item label="注册资金">
        <el-input v-model="company.registerCapital"></el-input>
      </el-form-item>
    </el-form>
    <el-button style="margin-top: 12px;" @click="prev">上一步</el-button>
    <el-button style="margin-top: 12px;" @click="next">下一步</el-button>
   </div>

  <!-- 关系人信息 -->
   <div class="addItem" v-show="active == 2">
    <h3>关系人信息</h3>
    <el-form :label-position="labelPosition" label-width="80px" :model="company">
      <el-form-item label-width="120px" label="负责人姓名">
        <el-input v-model="director.directorName"></el-input>
      </el-form-item>
      <el-form-item label-width="120px"  label="负责人类型">
        <el-input v-model="director.directorType"></el-input>
      </el-form-item>
      <el-form-item label-width="120px"  label="负责人证件号码">
        <el-input v-model="director.directorCertificateNumber"></el-input>
      </el-form-item>
      <el-form-item label-width="120px"  label="联系方式">
        <el-input v-model="director.phone"></el-input>
      </el-form-item>
    </el-form>
    <el-button  @click="prev">上一步</el-button>
    <el-button  @click="addCompanies">提交</el-button> 
   </div>

  <!-- 注册经营信息  -->
   <div class="addItem" v-show="active == 1">
    <h3>关系人信息</h3>
    <el-form :label-position="labelPosition" label-width="80px" :model="company">
      <el-form-item label-width="100px" label="机构名称">
        <el-input v-model="company.organization"></el-input>
      </el-form-item>
      <el-form-item label-width="100px" label="机构地址">
        <el-input v-model="company.organizationAddress"></el-input>
      </el-form-item>
      <el-form-item label-width="100px" label="国税登记号">
        <el-input v-model="company.nationalTaxNumber"></el-input>
      </el-form-item>
      <el-form-item label-width="100px" label="地税登记号">
        <el-input v-model="company.localTaxNumber"></el-input>
      </el-form-item>
    </el-form>
    <el-button  @click="prev">上一步</el-button>
    <el-button  @click="next">下一步</el-button>
   </div>

   

   

  </div>
</template>

<script>
import axios from 'axios'
import apis from '../../../http/apis/apis'
  export default {
    data() {
      return {
        active: 0,
        labelPosition: 'right',
        company: {
          companyName: '',        //企业名称
          telephone: '',          //企业联系方式
          registerType: '',          //注册类型
          registerCapital: '',         //注册资金
          organization: '',       //机构名称
          organizationAddress: '',   //机构地址
          nationalTaxNumber: '',    //国税登记号
          localTaxNumber: '',    //地税登记号
        },
        director: {
          directorName: '',     //负责人名称
          directorType: '',  //负责人类型
          directorCertificateNumber: '',    //负责人证件号码
          phone: ''     //  负责人联系方式
        }

      };
    },

    methods: {
      next() {
        if (this.active++ == 3) this.active = 3;
      },
      prev() {
        if (this.active-- == 0) this.active = 0;
      },
      async addCompanies() {
        const {data} = await apis.companies.addCompanies([this.company, this.director])
        this.addCompaniesFlows()
        if(data) {
          this.addSuccess();
        }
      },
      //新增对公客户流水
      async addCompaniesFlows() {
        const {data} = await apis.companies.addCompaniesFlows({type: '企业开户',organization: this.company.organization, registerCapital: this.company.registerCapital, time: new Date().toLocaleString()})
        if(data) {
          alert('流水新增成功')
        }
      },
      addSuccess() {
        this.$message({
          message: '添加成功',
          type: 'success'
        });
      },

    }
    

  }
</script>

<style lang="scss">

  #addCompanyCustom {
    .addItem {
      width: 600px;
      padding: 10px 120px;
      box-shadow: 1px 1px 30px #ccc;
      background-color: #fff;
      margin: 30px auto;
      border-radius: 8px;
      h3 {
        text-align: center;
      }
      
    }
  }
</style>